<template>
	<view class="order-box">
		<view class="order-sub">
			<u-subsection :list="list" :current="curNow" mode="subsection" @change="sectionChange"></u-subsection>
		</view>
		<swiper class="my-swiper" :current="curNow" @change="changeCur" :style="{height:swiperHeight+'px'}">
			<!-- 历史订单 -->
			<swiper-item>
				<view :id="'content-wrap' + curNow">
					<view v-if="order_list.length===0">
						<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
						</u-empty>
					</view>
					<view class="historical-order" v-else>
						<view class="order-list-box padding-xs solid">
							<view class="order-item  bg-white text-center margin-tb-xs"
								v-for="(items,index) in order_list" :key="index">
								<view class="dish-title flex text-df text-cut justify-around margin-tb-sm">
									<view class="margin-right-xs">
										<text class="margin-right-xs">
											订单号
										</text>
										<text>{{items.order_id}}</text>
									</view>
									<text>{{items.order_time|timeFormat}}</text>
								</view>

								<view class="dish-box grid col-5" v-for="(dish,index) in items.dishes" :key="index">
									<view class="img">
										<image mode="scaleToFill" :src="dish.dish_img">
										</image>

									</view>
									<view class="dish_name">
										{{dish.dish_name}}

									</view>
									<view class="dish_price">
										{{dish.dish_price}}￥

									</view>
									<view class="dish_num">
										x{{dish.dish_count}}

									</view>
									<view class="dish_total">
										{{dish.dish_total_price}}￥
									</view>
								</view>
								<view class="flex justify-end">
									<text class="text-left ">菜品：{{items.order_num}}-共计{{items.order_total}}￥</text>
									<button class="cu-btn content bg-blue margin-left-xs"
										@click="againOrder(items)">再来一单</button>
								</view>
							</view>

						</view>
					</view>

				</view>
			</swiper-item>

			<!-- 当前购物车 -->
			<swiper-item>
				<view :id="'content-wrap' + curNow">
					<view v-if="totalNum==0">
						<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
						</u-empty>
					</view>
					<view v-else class="cu-list menu-avatar" v-else>
						<view class="cu-item" v-for="(food,index) in getCart" :key="index">
							<view class="cu-avatar lg" :style="{ 'background-image': 'url('+food.dish_img+')' }">
							</view>
							<view class="content">
								<view class="">{{food.name}}</view>
								<view class="text-gray text-sm flex dish-desc">
									<text>
										{{food.desc|filterDishDesc}}
									</text>
								</view>
								<view class="grid col-2 ">
									<view class="text-left">
										<text class="margin-right-xs">￥{{food.price}}</text>
										<text class="text-gray text-sm">销量:{{food.order_count}}</text>
									</view>

									<view class="text-right padding-right">
										<button v-if="food.num > 0" class="cu-btn sm cuIcon lines-gray round padding-sm"
											style="font-size: 40upx;">
											<text class="cuIcon-move text-lg text-bold"></text>
										</button>
										<text v-if="food.num > 0" class="padding-lr-xs margin-lr-sl">{{food.num}}</text>
										<button class="cu-btn sm cuIcon bg-orange padding-sm" style="font-size: 40upx;">
											<text class="cuIcon-add text-lg text-bold"></text>
										</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	import TypePick from '@/components/TypePick.vue'
	// import PayMent from '@/components/PayMent.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		request
	} from '@/common/request.js'
	// import TypePick from '@/components/TypePick.vue'
	export default {
		data() {
			return {
				list: ['历史订单', '当前订单'],
				curNow: 0,
				// swiper的高度，动态渲染
				swiperHeight: 2000,
				// 订单列表
				order_list: [],
				// 口味id
				flavor: 1,
				flavorList: []

			}
		},
		filters: {
			// 菜品介绍超出隐藏
			filterDishDesc(desc) {
				if (desc.length > 28) {
					const text = desc.replace(/[\n-]/g, ' ');
					return text.slice(0, 29)
				}
				return desc
			},
			// 格式化订单时间
			timeFormat(time){
				let re = time.split('T')
				let result=re[0]+' '+re[1].split('.')[0]
				// console.log(result)
				return result
			}
		},
		computed: {
			...mapState(['dishWithType', 'totalNum', 'totalPrice']),
			getCart() {
				const result = []
				this.dishWithType.forEach(item => {
					item.forEach(dish => {
						if (dish.num > 0) {
							result.push(dish)
						}
					})
				})
				return result
			}
		},
		onPullDownRefresh() {
			this.getOrderList()
		},
		onLoad() {
			this.getOrderList(),
				this.$nextTick(() => {
					this.setSwiperHeight();
					// console.log(this.swiperHeight)
					console.log('设置了swiperHeight的高度', this.swiperHeight)
				});
		},
		onShow() { //没次回到页面都会调用下拉刷新
			this.getOrderList()
			this.$nextTick(function(){
				this.setSwiperHeight()
			})
		},
		methods: {
			// ...mapMutations(['ADD2CART']),
			sectionChange(index) {
				this.curNow = index
			},
			changeCur(e) {
				this.curNow = e.detail.current
				this.$nextTick(() => {
					this.setSwiperHeight();
					console.log('设置了swiperHeight的高度', this.swiperHeight)
				});
			},
			// 再来一单
			againOrder(item) {
				// console.log('点击了再来一单')
				console.log(item)
				const dishList = []
				item.dishes.forEach(dish => {
					const obj = {
						id: dish.id,
						price: dish.dish_price,
						num: dish.dish_count
					}
					dishList.push(obj)
				})
				request({
					url: '/order',
					method: 'POST',
					data: {
						total: item.order_total,
						flavor_id: 1,
						dishes: dishList
					}
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '订购成功',
						duration: 2000
					})
					this.getOrderList()
				}).catch(() => {
					uni.showToast({
						icon: 'error',
						title: '订购失败',
						duration: 2000
					})
				})

			},
			getOrderList() {
				request({
					url: '/order',
				}).then(res => {
					this.order_list = res.order_list
					// this.order_list.reverse()
					// console.log(res)
				}).catch(e => {
					console.log(e)
				})
			},
			// getFlavorList() {
			// 	request({
			// 		url: '/flavor',
			// 	}).then(res => {
			// 		const result = res.flavorList.map(item => {
			// 			// console.log(item)
			// 			const obj = {
			// 				id: item.id,
			// 				name: item.name
			// 			}
			// 			return obj
			// 		})
			// 		this.flavorList.push(result)
			// 		// console.log(this.flavorList)
			// 		// this.flavorList = res.flavorList
			// 		// this.flavorNames = res.flavorList.map(item=>item.name)
			// 	}).catch(e => {
			// 		console.log(e)
			// 	})
			// },
			// // 设置flavor
			// setFlavor(val) {
			// 	// console.log('父组件接收到了子组件传递的flavor值',val,typeof(val))
			// 	const data = this.flavorList[0][val]
			// 	this.flavor = data.id
			// 	this.flavorName = data.name
			// },
			// // 控制口味选择的弹窗
			// selectFlavor() {
			// 	// 对refs进行处理
			// 	this.$refs.flavor.show = true
			// },
			// changeFlavor(e) {
			// 	// console.log('当前触发了change',e)
			// 	this.flavorIndex = e.index
			// 	// const curFlavor = this.flavorList[this.flavorIndex]
			// 	this.$emit('setFlavor',
			// 		this.flavorIndex,
			// 	)
			// },
			//动态设置swiper的高度
			setSwiperHeight() {

				let element = "#content-wrap" + this.curNow;
				console.log(element)
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					// console.log(res)
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
						// console.log(this.swiperHeight)
					}
				});


			},

		},
	}
</script>


<style lang="scss" scoped>
	.uni-margin-wrap {
		width: 690rpx;
		// background-color: #ccc;
		// width: 100%;
	}

	.cu-item {
		width: 100%;
		// height: 100%;
		text-align: center;
		background-color: #f1f1f1;
		margin: 0;
		border: none;
		// height: 50px;
		position: relative;
	}

	// .my-swiper {
	// 	height: 2000px !important;
	// }

	.cu-item.cur {
		background-color: #fff;
	}

	.cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: #f37b1d;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100% - 120upx);
	}

	.cu-list.menu-avatar>.cu-item {
		height: 100px;
	}



	.swiper-item {
		display: block;
		// height: 900rpx;
		// width:100vw;
		// line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.historical-order {
		// background-color: $uni-color-primary;
	}

	.current-order {
		background-color: $uni-color-success;
	}

	.cover {
		width: 150upx;
		height: 150upx;
	}

	.order-list-box {
		width: 100vw;
		background-color: #CCCCCC;

		.order-item {
			width: 100%;
			padding: 4px;
			border-radius: 4px;

			.dish-box {
				background-color: #FFFFFF;

				.img image {
					width: 50px;
					height: 50px;
					border-radius: 10px;
				}
			}
		}
	}

	// 菜品图片
</style>
